import React, { useEffect, useState } from 'react'
import {getProList, getCategory, searchPro, updateFlag} from '../../api/pro'
import { Table, Image, Switch,Input,Button, message } from 'antd'
import { Select } from 'antd'
const Index = () => {

  const [messageApi,Context] = message.useMessage()

  // 所有的数据
  const [proList,setProList] = useState()
  // 当前页码
  const [current,setCurrent] = useState(1)

  // 分类列表
  const [category,setCategory] = useState()

  useEffect(()=>{
    getProList().then(res => {
      // console.log(res.data);
      setProList(res.data)
    })

    getCategory().then(res => {
      // console.log(res.data);
      const arr = []
      res.data.forEach(item => {
        arr.push({
          text: item,
          value: item,
        })
      })

      setCategory(arr)
    })

  }, [])

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{(current - 1) * 10 + i + 1}</span>
      }
    },
    {
      title: '商品名称',
      dataIndex: 'proname',
      width: 300
    },{
      title: '商品图片',
      dataIndex: 'img1',
      render(t){
        return <Image height={50} src={t}  />
      }
    }, {
      title: '商品分类',
      dataIndex: 'category',
      filters: category,
      onFilter: (value, record) => record.category.indexOf(value) === 0, // 筛选条件
    }, {
      title: '商品价格',
      dataIndex: 'originprice',
      sorter: {
        compare: (a, b) => a.originprice - b.originprice,
        multiple: 1,
      }
    }, {
      title: '商品折扣',
      dataIndex: 'discount',
      sorter: {
        compare: (a, b) => a.discount - b.discount,
        multiple: 2,
      }
    }, {
      title: '是否推荐',
      dataIndex: 'isrecommend',
      render(t,r){
        return <Switch defaultChecked={t} onChange={(e)=>{
          updateFlag({
            proid: r.proid,
            type: 'isrecommend',
            flag: e
          }).then(res => {
            messageApi.info(res.message)
          })
        }} />
      },
    }, {
      title: '是否售卖',
      dataIndex: 'issale',
      render(t){
        return <Switch defaultChecked={t} />
      }
    }, {
      title: '是否秒杀',
      dataIndex: 'isseckill',
      render(t){
        return <Switch defaultChecked={t} />
      }
    }
  ]
  

  const [searchCategory, setSearchCategory] = useState()
  const [searchText, setSearchText] = useState()
  function searchClick(){
    // console.log(searchCategory,searchText);
    searchPro({
      category: searchCategory,
      search: searchText
    }).then(res => {
      // console.log(res);
      setProList(res.data)
    })
  }
  
  return (
    <div>
      {Context}
      <h1>商品列表</h1>
      <div style={{display: 'flex'}}>
        <Select value={searchCategory} onChange={e => {setSearchCategory(e)}} style={{width: 160}} options={category}></Select>
        <Input value={searchText} onChange={e => {setSearchText(e.target.value)}} placeholder='请输入要查询的商品名称' style={{width: 320}} />
        <Button onClick={searchClick}>搜索</Button>
      </div>
      <Table 
      dataSource={proList}
      rowKey={'proid'} 
      columns={columns}
      pagination={{
        current,
        onChange(count){
          setCurrent(count)
        }
      }}
      scroll={{
        y: 500
      }}
      />
    </div>
  )
}

export default Index